<template>
  <div class="register">


    <el-form ref="registerForm" :model="form" class="register-form">
      <h2>用户信息</h2>
      <el-form-item prop="missionResident" label="任务名">
        <el-input v-model="form.missionName" type="text" auto-complete="off" placeholder="任务名" readOnly="readOnly">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>

      <el-form-item prop="username" label="姓名">
        <el-input v-model="form.name" type="text" auto-complete="off" placeholder="姓名" readOnly="readOnly">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>

      <el-form-item prop="phone" label="电话">
        <el-input v-model="form.phone" type="text" auto-complete="off" placeholder="电话" readOnly="readOnly">
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
        </el-input>
      </el-form-item>

      <el-form-item prop="button">
        <el-row>
          <el-button type="success"@click="success" >完成核酸</el-button>
        </el-row>
      </el-form-item>
    </el-form>

    <!--  底部  -->
    <div class="el-register-footer">
      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
    </div>
  </div>
</template>

<script>
import {returnMessage} from "@/api/basicdata/user";
import {successMission} from "@/api/nuclein/residentmission";

export default {
  name: "Register",
  data() {
    return {
      form: {},
      query: {
        user:"",
        task:"",
      }
    };
  },
  created() {
    this.getAllMessage()

  },
  methods: {
    // 获取页面信息
    getAllMessage() {
      this.spiltUrl();
      returnMessage(this.query).then(res => {
        this.form=res.data.data
        console.log(this.form)
        console.log(this.form.residentId)
      })
    },
    // 分割网址路径
    spiltUrl() {
      var url = window.location.href; //获取地址栏路径
      var temp1 = url.split('?');//对url地址进行分割
      var pram = temp1[1];
      var keyValue = pram.split("&");
      var obj = {};
      for (var i = 0; i < keyValue.length; i++) {//循环分割挂过后的地址
        var item = keyValue[i].split("=");
        var key = item[0];
        obj[key] = item[1];
      }
      // 加密之后有+ 不能解密，需要先手动 将%20转成加号
      let user1 = obj.user.replaceAll("%20","+")
      let task1 = obj.task.replaceAll("%20","+")
      this.query.user = decodeURIComponent(user1)
      this.query.task = decodeURIComponent(task1)
    },


   // 点击完成按钮
    success() {
      successMission(this.form.residentId).then(res=>{
        if (res.code === 200) {
          alert("操作成功")
        }
      }).catch(()=>{
        alert("哦豁！！你系统炸了！！")
      })
    }
  }

};
</script>

<style rel="stylesheet/scss" lang="scss">
.register {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-image: url("../assets/images/login-background.jpg");
  background-size: cover;
}

.title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #707070;
}

.register-form {
  border-radius: 6px;
  background: #ffffff;
  width: 400px;
  padding: 25px 25px 5px 25px;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}

.register-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.register-code {
  width: 33%;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-register-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.register-code-img {
  height: 38px;
}
</style>
